<!--
  折线图line、柱状图bar、散点气泡图effectScatter      zls-2022/09/28
      Attributes
          1、xData            X轴数据
          2、yData            Y轴主题色及数据 [{ type: '', color: '', list: [], name: '', unit: '' }]
                  type： 图标类型(line、bar、effectScatter)
                  color：主题色
                  list： 数据列表
                  name： tooltip提示文字的名称
                  unit： tooltip提示文字的单位
          3、textColor        X轴和Y轴及拖拽缩放的文本颜色(默认为'#777')
          4、grid             图标距离上下左右的边距(具体配置可参考官网)
          5、dataZoom         是否支持拖拽缩放(如果支持，需要修改grid的bottom值)

      Demo==>
          // 注意：echartsBox类必须给定宽高！！！！
          <div class="echartsBox">
            <z-lineOrColumnarEcahrts id="restartEcahrts" :xData="echartsOp.xData" :yData="echartsOp.yData"></z-lineOrColumnarEcahrts>
          </div>

          const echartsOp:any = reactive({
            xData: ['03.21', '03.22', '03.23', '03.24', '03.25', '03.26', '03.27'],
            yData: [
              { type: 'line', color: '#38d2ff', list: [34, 78, 55, 90, 72, 14, 63], name: '数量', unit: '条' },
              { type: 'bar', color: '#8ef1e2', list: [1, 3, 4, 56, 12, 2, 1], name: '产量', unit: '吨' },
              { type: 'bar', color: '#ffb673', list: [11, 32, 43, 56, 3, 4, 1], name: '金额', unit: '万' },
              { type: 'effectScatter', color: '#badf00', list: [2, 5, 12, 5, 8, 16, 9], name: '风机', unit: '级' }
            ]
          })
-->
<template>
  <div class="z-lineOrColumnarEcahrts">
    <z-echarts :id="$attrs.id" :options="echartsOptions.obj"></z-echarts>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, watch } from 'vue'
const props = defineProps({
  xData: {
    type: Array as () => Array<any>,
    default: () => []
  },
  yData: {
    type: Array as () => Array<any>,
    default: () => []
  },
  textColor: {
    type: String,
    default: '#777'
  },
  grid: {
    type: Object,
    default: () => ({ top: '20', left: '30', right: '20', bottom: '20' })
  },
  dataZoom: {
    type: Boolean,
    default: false
  }
})

watch(
  () => props,
  () => {
    loadEcharts()
  },
  { deep: true }
)

onMounted(() => {
  loadEcharts()
})

const echartsOptions: any = reactive({ obj: {} })
function loadEcharts() {
  // 获取主题颜色
  const colors = props.yData.length ? props.yData.map(v => v.color) : []
  // 获取每种表格的数据
  let series: any = []
  props.yData.length
    ? props.yData.forEach((v: any) => {
        if (v.type === 'line') {
          series.push({
            type: v.type,
            smooth: true,
            symbol: 'arrow',
            showSymbol: false,
            symbolSize: 8,
            areaStyle: {
              opacity: 0.04
            },
            data: v.list
          })
        } else {
          series.push({
            type: v.type,
            data: v.list
          })
        }
      })
    : (series = [])
  echartsOptions.obj = {
    backgroundColor: 'transparent',
    // 提示信息配置
    tooltip: {
      trigger: 'axis',
      borderColor: 'transparent',
      borderWidth: 1,
      backgroundColor: 'rgba(0,0,0,.6)',
      padding: 10,
      // 坐标轴指示器配置项
      axisPointer: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(0, 0, 0, 0.1)'
        }
      },
      // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
      formatter: function (params: any) {
        let a = ''
        let b = ''
        let html = ''
        params.forEach((v: any, i: number) => {
          a = `
                  <div style="display: flex; flex-direction: column;font-size: 14px;">
                    <div style="color:#fff;margin-bottom:5px">
                      <span>${v.name}</span>
                    </div>
                `
          b += `
                  <div style="color: #fff;display:flex;align-items:center;">
                    <i style="width:8px;height:8px;border-radius:8px;margin-right:5px;background-color:${v.color}"></i>
                    <span >${props.yData[i].name} ：</span>
                    <span>${v.value}${props.yData[i].unit}</span>
                  </div>
                `
        })
        html = a + b + '</div>'
        return html
      }
    },
    // 图标距离上下左右的边距
    grid: props.grid,
    // X轴配置项(刻度线、文本、数据)
    xAxis: [
      {
        type: 'category',
        axisLine: { show: true, lineStyle: { type: 'solid', color: '#d8d9dc', width: '1' } },
        axisLabel: {
          color: props.textColor,
          lineHeight: 16,
          // interval: 0, // 强制文字产生间隔
          formatter: function (params: any) {
            let newParamsName = '' // 最终拼接成的字符串
            const paramsNameNumber = params.length // 实际标签的个数
            const provideNumber = 10 // 每行能显示的字的个数
            const rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
            /**
             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
             */
            // 条件等同于rowNumber>1
            if (paramsNameNumber > provideNumber) {
              /** 循环每一行,p表示行 */
              for (let p = 0; p < rowNumber; p++) {
                let tempStr = '' // 表示每一次截取的字符串
                const start = p * provideNumber // 开始截取的位置
                const end = start + provideNumber // 结束截取的位置
                // 此处特殊处理最后一行的索引值
                if (p === rowNumber - 1) {
                  // 最后一次不换行
                  tempStr = params.substring(start, paramsNameNumber)
                } else {
                  // 每一次拼接字符串并换行
                  tempStr = params.substring(start, end) + '\n'
                }
                newParamsName += tempStr // 最终拼成的字符串
              }
            } else {
              // 将旧标签的值赋给新标签
              newParamsName = params
            }
            // 将最终的字符串返回
            return newParamsName
          }
        },
        splitLine: { show: false },
        boundaryGap: false,
        data: props.xData
      }
    ],
    // y轴配置项(刻度线及文本)
    yAxis: [
      {
        type: 'value',
        name: '',
        nameTextStyle: { color: props.textColor, fontSize: 12, lineHeight: 12 },
        nameGap: 10,
        splitLine: { show: true, lineStyle: { color: '#d8d9dc', opacity: 1, type: 'dashed' } },
        axisLabel: { show: true, margin: 30, color: props.textColor, align: 'left' },
        axisTick: { show: false },
        axisLine: { show: false }
      }
    ],
    // 调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
    color: colors,
    // 图标类型配置(支持曲线图、柱状图、散点气泡图)
    series: series,
    dataZoom: props.dataZoom ? [{ type: 'slider', start: 0, end: 100, height: 16, textStyle: { color: props.textColor, fontWeight: 'bold', fontSize: 12 }, xAxisIndex: [0, 1], bottom: 10 }] : []
  }
}
</script>
<script lang="ts">
export default { name: 'z-lineOrColumnarEcahrts' }
</script>

<style lang="scss" scoped>
.z-lineOrColumnarEcahrts {
  width: 100%;
  height: 100%;
}
</style>
